<template>
	<view class="cart">
		<!--<view class="header" :style="{ position: headerPosition, top: headerTop }">-->
		<!--<view class="title">购物车</view>-->
		<!--</view>-->
		<!--&lt;!&ndash; 占位 &ndash;&gt;-->
		<!--<view class="place"></view>-->
		<!-- 购物车为空 -->
		<view v-if="cartList.length === 0" class="empty">
			<text class="iconfont icongouwuche" :class="'text-blue'"></text>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<!-- <navigator class="navigator" :class="'text-blue'" v-if="hasLogin"
					@tap="navTo('/pages/product/list')" open-type="switchTab">随便逛逛></navigator> -->
			</view>
			<view v-else class="empty-tips">
				空空如也
				<!-- <view class="navigator" :class="'text-blue'" @tap="$mHelper.backToLogin()">登录/注册 ></view> -->
			</view>
		</view>
		<!-- 购物车列表 -->
		<view class="goods-list" v-else>
			<!-- <view class="btn-clear" :class="'text-blue'" @tap="clearCart({ lose_status: 1 })">清空失效商品</view> -->
			<view class="rf-cart-row" v-for="(row, index) in cartList" :key="index">
				<!-- 删除按钮 -->
				<view class="menu" @tap.stop="deleteCartItem(row.id, 'one')" :class="'bg-blue'">
					<text class="iconfont icon iconiconfontshanchu1"></text>
				</view>
				<!-- 商品 -->
				<view class="carrier" :class="[
						theIndex === index ? 'open' : oldIndex === index ? 'close' : ''
					]" @touchstart="touchStart(index, $event)" @touchmove="touchMove(index, $event)"
					@touchend="touchEnd(index, $event)">
					<!-- checkbox -->
					<view class="checkbox-box" @tap="selected(index, row)">
						<view class="checkbox" :class="[
								parseInt(row.status, 10) === 0 ? `checkbox-disabled ${'text-gray'}` : 'text-gray'
							]">
							<view :class="[row.selected ? `on ${'bg-black'}` : '']"></view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goods-info">
						<view class="img">
							<image :src=" row.products.thump"></image>
						</view>
						<view class="info">
							<view class="title in2line" @tap="navTo(`/pages/product/product?id=${row.products.id}`)">
								{{ row.products && row.products.title }}
							</view>
							
							<view class="price-number">
								<view class="price" v-if="parseInt(row.status, 10) === 1"> ￥{{
									row.products && row.products.price
								}}</view>
								<!-- <view class="remark" >{{ row.products.desc }}</view> -->
								<view class="number" v-if="parseInt(row.status, 10) === 1">
									x 1
									<!-- <view class="sub" @tap.stop="sub(row, index)">
										<text class="iconfont icon icon-jianhao"></text>
									</view> -->
									<!-- <view class="input" @tap.stop="discard">
										<input type="number" :class="'text-blue'" v-model="row.number"
											@input.stop="numberChange(row, $event, index)" />
									</view> -->
									<!-- <view class="add" @tap.stop="add(row, index)">
										<text class="iconfont icon iconjia1"></text>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 脚部菜单 -->
		<view class="footer" :style="{ bottom: footerbottom }" v-if="cartList.length !== 0">
			<view class="checkbox-box" @tap="allSelect">
				<view class="checkbox" :class="'text-gray'">
					<view :class="[isAllselected ? `on ${'bg-grey'}` : '']"></view>
				</view>
				<view class="text">全选</view>
			</view>
			<view class="delBtn" :class="'text-gray'" @tap="deleteCartItem" v-if="selectedList.length > 0">
				删除</view>
			<view class="delBtn" :class="'text-gray'" @tap="clearCart()" v-if="selectedList.length > 0">清空
			</view>
			<view class="settlement">
				<view class="sum">合计:
					<view class="money">{{ moneySymbol }}{{ sumPrice }}</view>
				</view>
				<view class="btn" :class="'bg-black'" s @tap="createOrder">结算({{ selectedList.length }})</view>
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec show" v-if="specClass === 'show'" @touchmove.stop.prevent="stopPrevent" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideSpec"></view>
			<view class="layer" @tap.stop="stopPrevent">
				<rf-attr-content :isSelectedNum="false" :product="productDetail" @toggle="toggleSpec"></rf-attr-content>
			</view>
		</view>
		<!--页面加载动画-->
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
	</view>
</template>
<script>
	import rfLoading from "@/components/rf-loading/index.vue";
	import rfAttrContent from '@/components/rf-attr-content';
	import request from '@/common/request.js';
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			rfAttrContent,
			rfLoading
		},
		data() {
			return {
				sumPrice: '0.00',
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				showHeader: true,
				selectedList: [],
				isAllselected: false,
				// 控制滑动效果
				theIndex: null,
				oldIndex: null,
				isStop: false,
				cartList: [
					{
						id:1,
						product_img:"http://images.twsktd.com/images/2023/12/04/image_1701674193_n6QGWsTs.jpg",
						product_name:"商品一号",
						remark:"商品一号商品一号商品一号商品一号商品一号商品一号商品一号商品一号商品一号商品一号",
						status:1,
						number:1,
						sku_id:1,
						product_id:1,
						price:88.88,
						products:{
								sku_name:"商品一号",
								price:88.88,
								id:2,
								thump:""
						}
						
					}
				],
				hasLogin: null,
				footerbottom: 0,
				specClass: 'none',
				productDetail: {
					base_attribute_format: [],
					sku: []
				},
				specSelected: [],
				specChildList: [],
				specList: [],
				currentSkuId: '',
				moneySymbol: this.moneySymbol,
				loading: true,
				singleSkuText: this.singleSkuText
			};
		},
		onPageScroll(e) {
			// 兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		// 下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			this.selectedList.length = 0;
			this.isAllselected = false;
			this.sumPrice = 0;
			this.getCartItemList('refresh');
		},
		onShow() {
			// 兼容H5下结算条位置
			// #ifdef H5
			this.footerbottom =
				// document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
			// #endif
			// #ifdef APP-PLUS
			this.showHeader = false;
			// eslint-disable-next-line
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			this.initData();
		},
		methods: {
			...mapMutations(['vuex_setCartNum']),
			// 规格弹窗开关
			toggleSpec(row) {
				if (parseInt(row.status, 10) === 0) return;
				if (this.specClass === 'show') {
					if (!this.hasLogin) {
						this.specClass = 'none';
						this.$mHelper.toast('请先登录！');
						return;
					}
					this.handleCartItemUpdateSku(this.currentSkuId, row.skuId);
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					if (row) {
						this.getProductDetail(row);
					}
				}
			},
			// 获取产品详情
			async getProductDetail(row) {
				this.currentSkuId = row.sku_id;
				await this.$http
					.get(`${productDetail}`, {
						id: row.product_id
					})
					.then(async r => {
						this.productDetail = r.data;
						this.productDetail.sku_name = row.sku_name;
						this.specClass = 'show';
					});
			},
			hideSpec() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			},
			stopPrevent() {},
			clearCart(){
				let opt = {
					url : 'api/gashapons/clearCart',
					method: 'get'
				};
				
				request.httpTokenRequest(opt).then((res)=>{
					this.getCartItemList();
				})
			},
			// 删除选中购物车商品
			async deleteCartItem(id, type) {
				const skuIds = [];
				if (type) {
					skuIds.push(parseInt(id, 10));
				} else {
					for (let i = 0; i < this.cartList.length; i++) {
						if (this.cartList[i].selected) {
							skuIds.push(parseInt(this.cartList[i].id, 10));
						}
					}
				}
				
				
				let opt = {
					url : 'api/gashapons/delCart',
					method: 'post'
				};
				
				request.httpTokenRequest(opt,{ids:JSON.stringify(skuIds)}).then((res)=>{
					this.selectedList.length = 0;
					this.isAllselected = false;
					this.sumPrice = 0;
					this.getCartItemList();
					this.oldIndex = null;
					this.theIndex = null;
				})
				
			},
			// 修改购物车商品sku
			async handleCartItemUpdateSku(skuId, newSkuId) {
				await this.$http
					.post(`${cartItemUpdateSku}`, {
						sku_id: skuId,
						new_sku_id: newSkuId
					})
					.then(() => {
						this.selectedList.length = 0;
						this.isAllselected = false;
						this.sumPrice = 0;
						this.getCartItemList();
					});
			},
			// 数据初始化
			initData() {
				this.hasLogin = true;
				if (this.hasLogin) {
					this.theIndex = null;
					this.oldIndex = null;
					this.selectedList.length = 0;
					this.isAllselected = false;
					this.sumPrice = 0;
					this.getCartItemList();
				} else {
					this.cartList = [];
					this.selectedList.length = 0;
					this.loading = false;
				}
			},
			// 通用跳转
			navTo(route) {
				if (!this.$mStore.getters.vuex_hasLogin) {
					uni.setStorageSync('backToPage', JSON.stringify({
						route: '/pages/cart/cart'
					}));
				}
				this.$mRouter.push({
					route
				});
			},
			// 获取购物车列表
			async getCartItemList(type) {
				
				let opt = {
					url : 'api/gashapons/cartlist',
					method: 'get'
				};
				
				request.httpTokenRequest(opt).then((res)=>{
					this.cartList = res.data.data.data;
				})
				
				// await this.$http
				// 	.get(`${cartItemList}`)
				// 	.then(r => {
				// 		this.loading = false;
				// 		if (type === 'refresh') {
				// 			uni.stopPullDownRefresh();
				// 		}
				// 		this.cartList = r.data;
				// 		let cartNum = 0;
				// 		r.data.forEach(item => {
				// 			if (parseInt(item.status, 10) === 1) {
				// 				cartNum += 1;
				// 			}
				// 		});
				// 		this.vuex_setCartNum(cartNum);
				// 	})
				// 	.catch(() => {
				// 		this.cartList = [];
				// 		this.loading = false;
				// 		if (type === 'refresh') {
				// 			uni.stopPullDownRefresh();
				// 		}
				// 	});
			},
			
			// 控制左滑删除效果
			touchStart(index, event) {
				// 多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				// 初始坐标
				this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
			},
			touchMove(index, event) {
				// 多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];

				if (this.isStop || Math.abs(moveX) < 5) {
					return;
				}
				if (Math.abs(moveY) > Math.abs(moveX)) {
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}

				if (moveX < 0) {
					this.theIndex = index;
					this.isStop = true;
				} else if (moveX > 0) {
					if (this.theIndex != null && this.oldIndex === this.theIndex) {
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(() => {
							this.oldIndex = null;
						}, 150);
					}
				}
			},
			touchEnd(index, $event) {
				// 结束禁止触发效果
				this.isStop = false;
			},
			// 选中商品
			selected(index, item) {
				console.log(this.cartList[index].id);
				if (parseInt(item.status, 10) === 0) return;
				this.cartList[index].selected = !this.cartList[index].selected;
				let i = this.selectedList.indexOf(this.cartList[index].id);
				i > -1 ?
					this.selectedList.splice(i, 1) :
					this.selectedList.push(this.cartList[index].id);
				this.isAllselected = this.selectedList.length === this.cartList.length;
				this.sum();
			},
			// 全选商品
			allSelect() {
				let len = this.cartList.length;
				let arr = [];
				for (let i = 0; i < len; i++) {
					// 当商品
					if (parseInt(this.cartList[i].status, 10) !== 0) {
						this.cartList[i].selected = !this.isAllselected;
						arr.push(this.cartList[i].id);
					}
				}
				this.selectedList = this.isAllselected ? [] : arr;
				this.isAllselected = !(this.isAllselected || arr.length === 0);
				if (arr.length > 0) {
					this.sum();
				}
			},
			// 控制可输入购物车商品数量
			discard() {},
			
			// 创建订单
			async createOrder() {
				if (this.selectedList.length === 0) return;
				const data = {};
				const ids = [];
				let len = this.cartList.length;
				for (let i = 0; i < len; i++) {
					if (this.cartList[i].selected) {
						ids.push(parseInt(this.cartList[i].id, 10));
					}
				}
				
				uni.showModal({
					title:'提示',
					content:'确定前往结算吗？',
					success: (e) => {
						if(e.confirm){
							
							// uni.showActionSheet({
							// 	itemList: ['微信支付', '支付宝支付'],
							// 	success: (res)=> {
							// 		if(res.tapIndex==0){
							// 			this.create('wechat',ids)
							// 		}else{
							// 			this.create('alipay',ids)
							// 		}
							// 	},
							// 	fail: function (res) {
							// 		console.log(res.errMsg);
							// 	}
							// });
							
							uni.navigateTo({
								url:"/pages/me/create?ids="+ids
							})
							return;
							
							
							this.create('wechat',ids)
							
						}
					}
				})


			
			// 	data.type = 'cart';
			// 	data.data = ids.join(',');
			// 	this.selectedList.length = 0;
			// 	this.isAllselected = false;
			// 	this.sumPrice = 0;

			


			// 	this.navTo(`/pages/order/create/order?data=${JSON.stringify(data)}`);
			},
			create(type,cartIds){
				console.log('122',type,cartIds);
				
				let opt = {
					url : 'api/gashapons/createOrder',
					method: 'post'
				};
				
				request.httpTokenRequest(opt,{ids:JSON.stringify(cartIds)}).then((res)=>{
					uni.showToast({ title:res.data.msg, icon: 'none' });
					
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/me/order"
						})
					},1000)
					return ;
				})
				
			},
			// 合计
			sum() {
				this.sumPrice = 0;
				let len = this.cartList.length;
				const arr = [];
				for (let i = 0; i < len; i++) {
					if (this.cartList[i].selected) {
						arr.push(this.cartList[i]);
						this.sumPrice = this.arrSort(arr);
					}
				}
				this.sumPrice = this.sumPrice.toFixed(2);
			},
			// 向下舍去小数点后两位
			floor(val) {
				return Math.floor(val * 100) / 100;
			},
			// 计算相同商品不同规格价格
			arrSort(arr) {
				const map = {},
					dest = [];
				for (let i = 0; i < arr.length; i++) {
					const ai = arr[i];
					if (!map[ai.product_id]) {
						dest.push({
							id: ai.product_id,
							num: 0,
							price: 0,
							data: [ai]
						});
						map[ai.product_id] = ai;
					} else {
						for (let j = 0; j < dest.length; j++) {
							const dj = dest[j];
							if (dj.data[0].product_id === ai.product_id) {
								dj.data.push(ai);
								break;
							}
						}
					}
				}
				console.log(dest);
				const discountArr = [];
				dest.forEach(item => {
					item.data.forEach(item2 => {
						console.log('2111',item2);
						item.num += parseInt(1, 10);
						item.price += parseInt(1, 10) * item2.products.price;
					});
					const ladderPreferential = item.data[0].ladderPreferential || 0;
					for (let i = 0; i < ladderPreferential.length; i++) {
						if (item.num >= parseInt(ladderPreferential[i].quantity, 10)) {
							ladderPreferential[i].num = item.num;
							ladderPreferential[i].itemPrice = item.data[0].products.price;
							ladderPreferential[i].totalPrice = item.data[0].products.price;
							discountArr.push(ladderPreferential[i]);
							break;
						}
					}
				});
				let amount = 0;
				let discount = 0;
				discountArr.forEach(item2 => {
					if (parseInt(item2.type, 10) === 1) {
						discount += item2.price * item2.num;
					} else {
						discount +=
							item2.totalPrice -
							this.floor((item2.itemPrice * item2.price) / 100) * item2.num;
					}
				});
				dest.forEach(item => {
					amount += item.price;
				});
				return amount - discount;
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.checkbox-box {
		display: flex;
		align-items: center;

		.checkbox {
			width: 35rpx;
			height: 35rpx;
			border-radius: 100%;
			border: solid 2rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.on {
				width: 25rpx;
				height: 25rpx;
				border-radius: 100%;
			}
		}

		.checkbox-disabled {
			border: solid 2rpx $font-color-disabled;
		}

		.text {
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.title {
			font-size: 36rpx;
		}
	}

	.place {
		background-color: #fff;
		height: 100rpx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.goods-list {
		width: 100%;
		padding: 0 0 100rpx 0;

		.btn-clear {
			text-align: right;
			padding: 0 $spacing-lg;
			font-size: $font-base + 2upx;
		}

		.tis {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		.icongouwuche {
			font-size: $font-lg + 100upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2upx;
			color: $font-color-disabled;

			.navigator {
				margin-left: 16rpx;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 0 2%;
		background-color: #fbfbfb;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 0rpx;
		z-index: 5;

		.delBtn {
			border: solid 1rpx;
			padding: 0 24rpx;
			height: 42rpx;
			border-radius: 24rpx;
			font-size: $font-sm;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.settlement {
			width: 52%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.sum {
				font-size: $font-base;
				margin-right: 8rpx;
				display: flex;
				justify-content: flex-end;

				.money {
					font-weight: 600;
				}
			}

			.btn {
				padding: 0 26rpx;
				height: 50rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
			}
		}
	}

	.popup .layer {
		// #ifndef H5
		bottom: 0;
		// #endif
	}
</style>
